<template>
  <view :style="{ height: addUnit(height) }">
    <view
      :class="`wd-navbar ${getCustomClass} ${getFixed ? 'is-fixed' : ''} ${getBordered ? 'is-border' : ''}`"
      :style="rootStyle"
    >
      <view class="wd-navbar__content">
        <view class="wd-navbar__capsule" v-if="$slots.capsule">
          <slot name="capsule" />
        </view>

        <view
          :class="`wd-navbar__left ${getLeftDisabled ? 'is-disabled' : ''}`"
          :hover-class="getLeftDisabled || $slots.left ? '' : 'wd-navbar__left--hover'"
          :hover-stay-time="70"
          @click="handleClickLeft"
          v-else-if="!$slots.left"
        >
          <wd-icon v-if="getLeftArrow" name="arrow-left" custom-class="wd-navbar__arrow" />
          <view v-if="getLeftText" class="wd-navbar__text">{{ getLeftText }}</view>
        </view>

        <view
          v-else
          :class="`wd-navbar__left ${getLeftDisabled ? 'is-disabled' : ''}`"
          @click="handleClickLeft"
          class="wd-navbar__text"
          :hover-class="getLeftDisabled ? '' : 'wd-navbar__left--hover'"
          :hover-stay-time="70"
        >
          <slot name="left" />
        </view>

        <view class="wd-navbar__title">
          <slot name="title" />
          <span v-if="!$slots.title && getTitle">{{ getTitle }}</span>
        </view>
        <view
          :class="`wd-navbar__right ${getRightDisabled ? 'is-disabled' : ''}`"
          @click="handleClickRight"
          v-if="$slots.right || getRightText"
          class="wd-navbar__text"
          :hover-class="getRightDisabled ? '' : 'wd-navbar__right--hover'"
          :hover-stay-time="70"
        >
          <slot name="right" />

          <view
            v-if="!$slots.right && getRightText"
            class="wd-navbar__text"
            hover-class="wd-navbar__text--hover"
            :hover-stay-time="70"
          >
            {{ getRightText }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import {
    computed,
    type CSSProperties,
    getCurrentInstance,
    nextTick,
    onMounted,
    ref,
    watch,
  } from 'vue';
  import { makeNumberProp } from 'wot-design-uni/components/common/props';
  import { addUnit, getRect, isDef, objToStyle } from 'wot-design-uni/components/common/util';
  import wdIcon from 'wot-design-uni/components/wd-icon/wd-icon.vue';

  import { useNavbarInternal } from './data';
  import { navbarProps } from './types';

  defineOptions({
    name: 'ea-navbar',
    options: {
      virtualHost: true,
      addGlobalClass: true,
      styleIsolation: 'shared',
    },
  });
  const props = defineProps({
    ...navbarProps,
    /** 自定义层级 */
    zIndex: makeNumberProp(300),
    /** 选择器 */
    selector: { type: String, default: '' },
  });
  const emit = defineEmits(['click-left', 'click-right']);

  const height = ref<number | ''>(''); // 占位高度

  const { statusBarHeight } = uni.getSystemInfoSync();
  const navbar = useNavbarInternal(props.selector);

  /** 获取自定义根节点样式 */
  const getCustomStyle = computed(() => unref(navbar.customStyle) ?? props.customStyle);
  /** 获取自定义根节点样式类 */
  const getCustomClass = computed(() => unref(navbar.customClass) ?? props.customClass);
  /** 获取卡片标题 */
  const getTitle = computed(() => unref(navbar.title) ?? props.title);
  /** 获取左侧文案 */
  const getLeftText = computed(() => unref(navbar.leftText) ?? props.leftText);
  /** 获取右侧文案 */
  const getRightText = computed(() => unref(navbar.rightText) ?? props.rightText);
  /** 获取是否显示左侧箭头 */
  const getLeftArrow = computed(() => unref(navbar.leftArrow) ?? props.leftArrow);
  /** 获取是否显示下边框 */
  const getBordered = computed(() => unref(navbar.bordered) ?? props.bordered);
  /** 获取是否固定到顶部 */
  const getFixed = computed(() => unref(navbar.fixed) ?? props.fixed);
  /** 获取固定在顶部时，是否在标签位置生成一个等高的占位元素。 */
  const getPlaceholder = computed(() => unref(navbar.placeholder) ?? props.placeholder);
  /** 获取导航栏 z-index */
  const getZIndex = computed(() => unref(navbar.zIndex) ?? props.zIndex);
  /** 获取是否开启顶部安全区适配 */
  const getSafeAreaInsetTop = computed(
    () => unref(navbar.safeAreaInsetTop) ?? props.safeAreaInsetTop,
  );
  /** 获取是否禁用左侧按钮，禁用时透明度降低，且无法点击。 */
  const getLeftDisabled = computed(() => unref(navbar.leftDisabled) ?? props.leftDisabled);
  /** 获取是否禁用右侧按钮，禁用时透明度降低，且无法点击。 */
  const getRightDisabled = computed(() => unref(navbar.rightDisabled) ?? props.rightDisabled);

  watch(
    [() => unref(getFixed), () => unref(getPlaceholder)],
    () => {
      setPlaceholderHeight();
    },
    { deep: true, immediate: false },
  );

  const rootStyle = computed(() => {
    const style: CSSProperties = {};
    if (unref(getFixed) && isDef(unref(getZIndex))) {
      style['z-index'] = unref(getZIndex);
    }
    if (unref(getSafeAreaInsetTop)) {
      style['padding-top'] = addUnit(statusBarHeight || 0);
    }
    return `${objToStyle(style)};${unref(getCustomStyle)}`;
  });

  onMounted(() => {
    if (unref(getFixed) && unref(getPlaceholder)) {
      nextTick(() => {
        setPlaceholderHeight();
      });
    }
  });

  function handleClickLeft() {
    if (!unref(getLeftDisabled)) {
      emit('click-left');
    }
  }

  function handleClickRight() {
    if (!unref(getRightDisabled)) {
      emit('click-right');
    }
  }

  const { proxy } = getCurrentInstance() as any;

  function setPlaceholderHeight() {
    if (!unref(getFixed) || !unref(getPlaceholder)) {
      return;
    }

    getRect('.wd-navbar', false, proxy).then((res) => {
      height.value = res.height as number;
    });
  }
</script>

<style lang="scss">
  @import 'wot-design-uni/components/wd-navbar/index';

  .wd-navbar__left--hover {
    background: unset;
    background-color: unset;
    // color: red;
    opacity: var(--wot-navbar-disabled-opacity, 0.6);
  }
  .wd-navbar__right--hover {
    background: unset;
    background-color: unset;
    // color: red;
    opacity: var(--wot-navbar-disabled-opacity, 0.6);
  }
  .wd-navbar__left {
    // color: #f5f5f5;
  }
  .wd-navbar__right {
    // color: #f5f5f5;
  }
  // 开启 Wot 的深色模式只会影响 Wot 组件的 UI，并不会影响全局的文字颜色或背景颜色，你可以参考以下 CSS 来设置一些全局样式。
  .wot-theme-dark {
    .wd-navbar__left--hover {
      background: unset;
      background-color: unset;
      // color: red;
      opacity: var(--wot-navbar-disabled-opacity, 0.6);
    }
    .wd-navbar__right--hover {
      background: unset;
      background-color: unset;
      // color: red;
      opacity: var(--wot-navbar-disabled-opacity, 0.6);
    }
    .wd-navbar__left {
      // color: #f5f5f5;
      // color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
    }
    .wd-navbar__right {
      // color: #f5f5f5;
      // color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
    }
  }
</style>
